<template>
	<view class="cargoP">
		<view class="searchPP">
			<view class="searchP">
				<u-icon name="arrow-left" @click="goBack"></u-icon>
				<view class="search" :style="{ width: '98%' }">
					<u-search style="margin-left: 8px;" placeholder="请输入充电线ID" shape="round" @search='searchLine' v-model="keyword"
					 :show-action="false"></u-search>
				</view>
			</view>
		</view>
		<view>
			<view style="display: flex; align-items: center;background-color: #fff;border-top: 1px solid #e9e9e9;">
				<view style="position: absolute;display: flex;align-items: center;margin-left: 3rem;">选择设备</view>
				<u-dropdown>
					<u-dropdown-item v-model="selectV" :title="selectV" active-color="#02af74" :options="selectList" @change="selectChange"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="showDataC">
			<view class="showDataC-item" v-for="(item, index) in dataList" :key="index">
				<view class="showDataC-item-child" :class="item.status == 0 ? 'green':'gray'">
					<view class="Icon">
						<image v-if="item.status == 0" style="width: 2rem; height: 1rem" src="../../style/image/cargo/A2-1.png" alt="" />
						<image v-else style="width: 2rem; height: 1rem" src="../../style/image/cargo/A2-2.png" alt="" />
					</view>

					<view v-if="item.status == 0" @click="selectClickM(item,index)" class="Icon-bottom">
						<image v-if="item.select == false" style="width: 1rem; height: 1rem" src="../../style/image/cargo/round.png" alt="" />
						<image v-else style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
					</view>

					<view class="showDataC-item-content">
						<view style="margin: 0.2rem; color: #999;">产品类型：
							<text style="color: #000;">{{getProductType(item.type)}}</text>
						</view>
						<view style="margin: 0.2rem;color: #999;">设备ID：
							<text style="color: #000;">{{item.deviceId}}</text>
						</view>
						<view style="margin: 0.2rem;color: #999;">设备备注：
							<text style="color: #000;">{{item.remarks}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="dataList.length==0 && !isLoading"  style="text-align: center;margin: 4rem auto;">
			<image style="width: 10rem; height: 8rem;" src="../../style/image/my/A28.png" alt="" />
			<view style="color: #999999; font-size: 0.65rem; padding: 2rem">
				当前暂无数据
			</view>
		</view>
		<uni-load-more v-if="dataList.length>0 && !isLoading"  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="loadstatus"></uni-load-more>
		<view class="button">
			<u-button @click="gotoNext()" type="success" style="border-radius: 0;">去铺货</u-button>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		AppModule
	} from "../../store/modules/app";

	import {
		findTerminalByType,
	} from "../../utils/uniApi";
	import uniLoadMore from '../loadMore/uni-load-more.vue';
	// import VConsole from "vconsole";
	// const vConsole = new VConsole();

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components:{
			 'uniLoadMore':uniLoadMore
		}
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;
		
		public isLoading = false; //是否加载中
		public keyword = ""; //搜索框
		public selectV = "全部设备";//
		public selectVC = "";//
		public selectList: Array < object > = [
			{label: "全部设备",value:"",},
			{label: "已铺货",value: "yph",},
			{label: "未铺货",value: "wph",},
		];
		public dataList: any = [];//数据源
		public pageNo:any = 1;
		public selectDataList: any = [];//选择的需要铺货的设备
		
		public  loadstatus = 'more'
		public  contentText={ contentdown: '下拉或点击查看更多',contentrefresh: '加载中',contentnomore: '没有更多' }
		public continueTypes = true;
		
		created() {
			
		}
		onHide() {
			uni.hideLoading();
		}
		//下拉刷新
		onPullDownRefresh() {
		    setTimeout(function () {
		      uni.redirectTo({
		        url: "../../pages/usb/choiceDevice",
		      });
		      uni.stopPullDownRefresh();
		    }, 1000);
		}
		//上拉加载更多
		onReachBottom() {
			if(!this.continueTypes){
				return
			}
		    this.pageNo = this.pageNo + 1;
		    this.getChargerData(this.pageNo,this.selectVC)
		}
		clickLoadMore(){
			this.onReachBottom()
		}

		onLoad() {
			console.log('第一次计入')
		}
		
		onShow(){
			
		}
		
		mounted() {
			this.getChargerData(this.pageNo,this.selectVC)
		}
		
		getChargerData(page:any,status:any){
			this.isLoading = true
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				keyWord: this.keyword,
				// posTypeId: this.posTypeId, // 机型ID
				state: status, //铺货状态 yph 已铺货|wph 未铺货
				pageNo: page,
				pageSize: 10,
				type:2,//0底座   1充电宝     2充电线
			};
			findTerminalByType(params).then((res:any) => {
				// console.log("输出参数值："+JSON.stringify(res.data))
				this.isLoading = false
				uni.hideLoading();
				if (res.data.code == 200) {
					var boolee = res.data.hasNext == false && this.continueTypes == false;
					if (res.data.hasNext == true) {
					  this.loadstatus = "more";
					} else {
					  this.loadstatus = "noMore";
					}
					if (res.data.isFirst || !boolee) {
						if (res.data.hasNext == false) {
							this.continueTypes = false;
						}
						if (this.dataList.length > 0 && page == 1) { //搜索时清除已有数据  如果有分页 需在考虑
							this.dataList = [];
						}
						res.data.data.filter((item: any, index: number) => {
							var isSelect = false
							this.selectDataList.filter((itemd: any, indexd: any) => {
								if (itemd.sn === item.sn) {
									isSelect = true;
								}
							})
							item["select"] = isSelect;
							this.dataList.push(item);
						});
						// res.data.data.filter((item:any, index:any) => {
						// 	item["select"] = false
						// 	this.dataList.push(item);
						// });
					}
				} else {
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}
		
		//cell的选中
		selectClickM(data: any, index: any) {
			this.dataList.filter((itemd: any, indexd: any) => {
				if (index == indexd) {
					itemd.select = !itemd.select
					if(itemd.select){
						this.selectDataList.push(itemd);
					}else{
						this.selectDataList.filter((item: any, index: any) => {
							if (item.sn == itemd.sn) {
								this.selectDataList.splice(index, 1);
							}
						})
					}
				}
			})
		}
		//产品类型
		getProductType(type:any){
			if(type == '0'){
				return '充电宝'
			}else if(type == '1'){
				return '底座'
			}else if(type == '2'){
				return '充电线'
			}
		}
		
		//
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		}
		//搜索框
		searchLine(value:any){
			this.keyword = value
			this.pageNo = 1
			this.getChargerData(this.pageNo,this.selectVC)
		}
		//选择设备状态下拉框
		selectChange(index: any) {
			this.selectList.filter((item: any, indexd: any) => {
				if (item.value == index) {
					this.selectV = item.label;
					this.selectVC = item.value;
					this.pageNo = 1
					this.getChargerData(this.pageNo,this.selectVC)
				}
			});
		}
		//充电线 去铺货
		gotoNext(){
			if(this.selectDataList.length<=0){
				uni.showToast({
					title: "请选择设备",
					icon: "none",
					duration: 1000,
				});
				return
			}
			
			var snlist:any = [];
			this.selectDataList.filter((item: any, indexd: any) => {
				snlist.push(item.sn);
			});
			
			var dic = {list:this.selectDataList,snlist:snlist,type:"charger"}//扫码是只有sn
			uni.navigateTo({
				url: "../cargo/selectBusin?snAndtype=" + encodeURIComponent(JSON.stringify(dic)),
			});
		}
	
		
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #F3F5F7;
	}

	/deep/.u-cell-box {
		height: 20rem;
		overflow-y: scroll;
	}

	/deep/.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		display: flex;
		padding-right: 3rem;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;
	}

	.searchP {
		background-color: white;
		display: flex;
	}

	.showDataC {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem 0.5rem;
		justify-content: space-between;
	}

	.showDataC-item {
		line-height: 1.3rem;
		width: 100%;
		position: relative;
	}

	.Icon {
		position: absolute;
		right: 0.25rem;
	}

	.showDataC-item-child {
		margin: 0.25rem;
		border-radius: 0.25rem;
	}

	.showDataC-item-content {
		padding: 0.5rem;
	}

	.Icon-bottom {
		position: absolute;
		bottom: 0.75rem;
		right: 0.75rem;
	}

	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.green{
		border: 1px solid #02B074;
	}
	.gray{
		border: 1px solid #999999;
	}
</style>
